<html>
<head>
    <title>Welcome to Grails Maps</title>

    <link rel="stylesheet" href="css\maps.css" type="text/css">
    <script type="text/javascript" src="js/jquery-1.4.1.js"></script>


    <script type="text/javascript" src="js/maps.js"></script>
    <script type="text/javascript" src="js/pagination.js"></script>

    <script type="text/javascript"
            src="http://www.google.com/jsapi?key=ABQIAAAAiVvLfVjjB1KmQhUm1SwcpBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQQKUpurwoNEcA7_Vi5pMFL-IGerw"></script>

    <script type="text/javascript">
        google.load("maps", "2.x");

        function initialize() {
            var map = new google.maps.Map2(document.getElementById("map"));
            map.setCenter(new GLatLng(40.00, -91.00), 3);
            map.setUIToDefault();
        }
        google.setOnLoadCallback(initialize);
    </script>


<body>
<div id="body-wrapper">

   <div id="header">

    <div><a href=""><img src="images/us_map.gif"/></a></div>

  </div>
    <div id="state-wrapper">
        <h2>States</h2>

        <div id="state-list">
            <ul></ul>
        </div>
    </div>
    <div id="main-content">
        <div id="page-info">
            <div id="page-header">
                <div id="app-header">
                    <h1>Welcome to Sarasota Tech Fest - Map Demo</h1>

                    <p>Select a state to view cities and maps</p>
                </div>

                <div id="search-form" >
                    <label>Search</label><span><input type="text" name="searchText" value=""/></span>
                    <input type="button" id="search-button" value="Search"/>
                </div>


            </div>


            <table id="city-list">
                <caption id="city-header">Cities in</caption>
                <tr>
                    <th>City Name</th>
                    <th id="state-header">State</th>
                </tr>
            </table>
            <div class="pagination-wrapper">
            </div>


            <div id="city-wrapper">
                <div>
                    <a href="#" id="back-to-search">Back to Search</a>
                </div>

            </div>


        </div>
        <div id="map-wrapper">
            <div id="map">
            </div>
        </div>
         <div id="ajax-status">ajax status</div> 

    </div>
</div>
</body>
</html>